package com.example.mycomposelesson.ui

import androidx.compose.animation.*
import androidx.compose.animation.core.MutableTransitionState
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Button
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.mycomposelesson.ui.theme.MyComposeLessonTheme


@Preview( showBackground = true)
@Composable
fun AnimateDemoPreview(){
    MyComposeLessonTheme {
        AnimateDemo()
    }
}
@Composable
fun AnimateDemo(){

    Column(modifier=Modifier.padding(10.dp).fillMaxWidth(),
        horizontalAlignment=Alignment.CenterHorizontally) {
        var editable by remember { mutableStateOf(true) }
        val density = LocalDensity.current
        AnimatedVisibility(
            visible = editable,
            enter = slideInVertically {
                // Slide in from 40 dp from the top.
                with(density) { -40.dp.roundToPx() }
            } + expandVertically(
                // Expand from the top.
                expandFrom = Alignment.Top
            ) + fadeIn(
                // Fade in with the initial alpha of 0.3f.
                initialAlpha = 0.3f
            ),
            exit = slideOutVertically() + shrinkVertically() + fadeOut()
        ) {
            Text("Hello",
                Modifier.fillMaxWidth().height(100.dp),
                style = MaterialTheme.typography.h4,
                textAlign = TextAlign.Center)
        }
        Button(onClick = { editable=!editable }) {
            Text(style=MaterialTheme.typography.button,text="动画")
        }

        val state = remember {
            MutableTransitionState(false).apply {
                // Start the animation immediately.
                targetState = true
            }
        }
        AnimatedVisibility(visibleState = state) {
            Text(text = "Hello, world!")
        }
        // Use the MutableTransitionState to know the current animation state
        // of the AnimatedVisibility.
        Text(
            text = when {
                state.isIdle && state.currentState -> "Visible"
                !state.isIdle && state.currentState -> "Disappearing"
                state.isIdle && !state.currentState -> "Invisible"
                else -> "Appearing"
            },
            Modifier.fillMaxWidth().height(100.dp),
            style = MaterialTheme.typography.h4,
            textAlign = TextAlign.Center)
    }
}